<template>
  <div class="app-container home">
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card style="background: #5b8ff9;">
          <div class="update-log">
            <div class="update-left">
              <div class="update-number">{{totalDeadPersons}}人</div>
              <div class="update-title">逝者信息</div>
            </div>
            <div class="update-icon">
              <Document style="width: 3em; height: 3em; vertical-align: middle;" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card style="background: #5ad8a6;">
          <div class="update-log">
            <div class="update-left">
              <div class="update-number">{{totalMembers}}人</div>
              <div class="update-title">家属信息</div>
            </div>
            <div class="update-icon">
              <Tickets style="width: 3em; height: 3em; vertical-align: middle;" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card style="background: #c280ff;">
          <div class="update-log">
            <div class="update-left">
              <div class="update-number">{{totalMartyrs}}人</div>
              <div class="update-title">烈士名人</div>
            </div>
            <div class="update-icon">
              <Memo style="width: 3em; height: 3em; vertical-align: middle;" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card style="background: #5d7092;">
          <div class="update-log">
            <div class="update-left">
              <div class="update-number">{{totalGraves}}个</div>
              <div class="update-title">墓穴数量</div>
            </div>
            <div class="update-icon">
              <FolderOpened style="width: 3em; height: 3em; vertical-align: middle;" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16" class="card-box">
        <el-card>
          <template #header>代客祭扫订单量(年环比)</template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 180px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" class="card-box">
        <el-card style="background: #f59a23;height: 258px">
          <div class="total-number" style="font-size: 22px; font-weight: bold;">
            <!-- <div class="t-number">
              4000个
            </div>
            <div class="t-text">
              墓地
            </div> -->
            墓穴使用情况
          </div>
          <div class="t-flex">
            <div class="total-number">
              <div class="t-number">
                {{usedCount}}个
              </div>
              <div class="t-text">
                已使用
              </div>
            </div>
            <div class="total-number">
              <div class="t-number">
                {{reservedCount}}个
              </div>
              <div class="t-text">
                已预约
              </div>
            </div>
            <div class="total-number">
              <div class="t-number">
                {{availableCount}}个
              </div>
              <div class="t-text">
                待售
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16" class="card-box">
        <el-card>
          <template #header>今日待处理订单</template>
          <el-table v-loading="loading" :data="orderList" style="width: 100%;">
            <el-table-column label="序号" width="50" type="index" align="center" />
            <el-table-column label="订单编号" align="center" prop="id" />
            <el-table-column label="联系人" align="center" prop="contacts" />
            <el-table-column label="联系电话" align="center" prop="contactsPhone" />
            <el-table-column label="预约日期" align="center" prop="appointmentDate" />
            <el-table-column label="订购套餐" align="center" prop="offerlibationName" />
            <el-table-column label="服务地点" align="center" prop="graveName" />
          </el-table>

          <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
        </el-card>
      </el-col>
      <el-col :span="8" class="card-box">
        <el-card>
          <template #header>最新云祭扫动态</template>
          <div class="js-top">
            <div class="js-number">
              {{sacrificeandrenovatetotal}}
            </div>
            <div class="js-text">位网友在线祭扫中</div>
          </div>
          <div class="scroll-container" v-if="sacrificeandrenovateList.length >= 4">
            <vue3ScrollSeamless class="scroll-wrap text-color" :classOptions="classOptions" :dataList="sacrificeandrenovateList">
              <div v-if="sacrificeandrenovateList.length > 0">
                <div v-for="(item, i) of sacrificeandrenovateList" :key="i" class="scroll-list">
                  <img src="@/assets/images/touxiang.png">
                  <div style="flex: 1; ">
                    <span class="name"> {{ item.memberName }}</span> {{ item.sacrificeandrenovateDate }}向
                    <span class="name"> {{ item.personName }} </span>
                    <span v-if="item.type == 1">留言{{ item.context }}</span>
                    <span v-else>供奉了{{ item.context }}</span>
                  </div>
                </div>
              </div>
            </vue3ScrollSeamless>
          </div>
          <div class="scroll-container" v-if="sacrificeandrenovateList.length < 4">
            <div v-if="sacrificeandrenovateList.length > 0">
              <div v-for="(item, i) of sacrificeandrenovateList" :key="i" class="scroll-list">
                <img src="@/assets/images/touxiang.png">
                <div style="flex: 1; ">
                  <span class="name"> {{ item.memberName }}</span> {{ item.sacrificeandrenovateDate }}向
                  <span class="name"> {{ item.personName }} </span>
                  <span v-if="item.type == 1">留言{{ item.context }}</span>
                  <span v-else>供奉了{{ item.context }}</span>
                </div>
              </div>
            </div>
            <div v-if="sacrificeandrenovateList.length == 0"
              style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
              暂无记录</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
  import { stats, orderStats, graveUsageStats, todayPendingOrders } from '@/api/index';
  import { listSacrificeandrenovate} from '@/api/cemetery/sacrificeandrenovate';
  import { vue3ScrollSeamless } from "vue3-scroll-seamless";
  import * as echarts from 'echarts';
  const commandstats = ref();

  const totalDeadPersons = ref(0);
  const totalGraves = ref(0);
  const totalMartyrs = ref(0);
  const totalMembers = ref(0);
  const availableCount = ref(0);
  const reservedCount = ref(0);
  const totalCount = ref(0);
  const usedCount = ref(0);

  const orderList = ref([])
  const loading = ref(false)
  const total = ref(0)
  const pageNum = ref(1)
  const pageSize = ref(10)

  const sacrificeandrenovateList = ref([])
  const sacrificeandrenovatetotal = ref(0)

  const list = reactive([
    {
      name: '天天开心',
      date: '2022-2-2 14:00',
      nameJ: '张丹妮',
      content: '鲜花*1'
    },
    {
      name: '天天开心',
      date: '2022-2-2 14:00',
      nameJ: '张丹妮',
      content: '鲜花*1'
    },{
      name: '天天开心',
      date: '2022-2-2 14:00',
      nameJ: '张丹妮',
      content: '鲜花*1'
    },
    {
      name: '天天开心',
      date: '2022-2-2 14:00',
      nameJ: '张丹妮',
      content: '鲜花*1'
    },
  ]);
  const classOptions = reactive({
    step: 0.3,//滚动速度值越大越快，但是值太小会卡顿
    limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
    direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。

  });
  const getOrderStats = async () => {
    const res = await orderStats();
    const currentYearData = res.data.currentYearData
    const lastYearData = res.data.lastYearData
    const x = [], y = [], y1 = []
    currentYearData.forEach((item, index) => {
      x.push(item.monthName)
      y.push(item.orderCount)
    })
    lastYearData.forEach((item, index) => {
      y1.push(item.orderCount)
    })
    const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
    commandstatsIntance.setOption({
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        top: '0%',
        left: 'right'
      },
      grid: {
        top: '15%',
        left: '10%',
        right: '5%',
        bottom: '10%'
      },
      xAxis: {
        type: 'category',
        data: x
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: y,
          showSymbol: false,
          type: 'line',
          smooth: true,
          name: '今年'
        },
        {
          data: y1,
          showSymbol: false,
          type: 'line',
          smooth: true,
          name: '去年'
        }
      ]
    });
    window.addEventListener('resize', () => {
      commandstatsIntance.resize();
    });
  }

  const getStats = async () => {
    const res = await stats();
    totalDeadPersons.value = res.data.totalDeadPersons
    totalGraves.value = res.data.totalGraves
    totalMartyrs.value = res.data.totalMartyrs
    totalMembers.value = res.data.totalMembers
  }

  const getGraveUsageStats = async () => {
    const res = await graveUsageStats();
    availableCount.value  = res.data.availableCount
    reservedCount.value  = res.data.reservedCount
    totalCount.value  = res.data.totalCount
    usedCount.value  = res.data.usedCount
  }

  const getTodayPendingOrders = async () => {
    loading.value = true;
    const res = await todayPendingOrders();
    orderList.value = res.data;
    loading.value = false;
  }

  /** 查询云祭扫列表 */
  const getlListSacrificeandrenovate = async () => {
    const params = {
      pageSize: 999,
      pageNum: 1,
    }
    const res = await listSacrificeandrenovate(params);
    sacrificeandrenovateList.value = res.rows;
    sacrificeandrenovatetotal.value = res.total;
  }

  onMounted(() => {
    getOrderStats();
    getStats()
    getGraveUsageStats()
    getTodayPendingOrders()
    getlListSacrificeandrenovate()
  });
</script>

<style lang="scss" scoped>
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;

      .update-number {
        font-size: 18px;
      }
    }

    .t-flex {
      display: flex;
      margin-top: 20px;

      .total-number {
        flex: 1;
      }

    }

    .total-number {
      color: #fff;
      margin-top: 35px;

      .t-number {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .js-top {
      margin-bottom: 20px;

      .js-number {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #3370ff;
        font-weight: bold;
        div {
          width: 46px;
          height: 46px;
          text-align: center;
          line-height: 46px;
          background: #f8f9fc;

        }
      }

      .js-text {
        text-align: center;
        margin-top: 6px;
      }
    }

    .scroll-wrap {
      width: 100%;
      height: 200px;
      overflow: hidden;
    }

    .scroll-list {
      padding: 5px 0;
      display: flex;
      align-items: center;

      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .name {
        color: #000;
        font-weight: bold;
      }
    }
  }
</style>
